<!--
 * @Description: 智能组卷 -- smartTest
 * @Author: your name
 * @Date: 2024-02-01
 * @LastEditTime: 2024-02-01
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="smartTest heart_w">
      <div class="Testinbox">
        <div class="testinfor">
          <div class="free">
            <h2 class="free_size">智 能 组 卷</h2>
            <div class="free_a">
              <span>试卷名称： </span>
              <el-input
                v-model="paperName"
                size="medium"
                style="width: 25%"
              ></el-input>
            </div>
            <div class="topic_title">
              <span>题目范围： </span>
              <p>全部（616）</p>
              <p>未做（534）</p>
              <p>收藏（23）</p>
              <p>错题（66）</p>
            </div>
            <div class="test_nums">
              <span>测试题量： </span>
              <el-radio v-model="radioNums" label="1">10</el-radio>
              <el-radio v-model="radioNums" label="2">20</el-radio>
              <el-radio v-model="radioNums" label="3">30</el-radio>
              <el-radio v-model="radioNums" label="4">60</el-radio>
              <el-radio v-model="radioNums" label="5">90</el-radio>
              <el-radio v-model="radioNums" label="6">120</el-radio>
            </div>
            <div class="footer_button">
              <el-button type="success" size="medium">创建试卷</el-button>
              <el-button type="danger" size="medium">重 置</el-button>
            </div>
          </div>
        </div>
      </div>

      <div class="paper_list">
        <h2>试卷列表</h2>
        <ul>
          <li class="itembox title-li">
            <p class="namebox">
              <span class="fw">序号</span>
              <span>试卷名称</span>
              <span class="fw">考试题量</span>
              <span class="fw">考试时长</span>
              <span class="fw">创建时间</span>
              <span>操作</span>
            </p>
          </li>
          <li class="itembox itemli" v-for="item in 3" :key="item">
            <p class="namebox boxli" style="text-align: start">
              <span class="fw">1</span>
              <span style="width: 28%">2023-08-08 14:07:24</span>
              <span class="fw">10</span>
              <span style="width: 20%">15分钟</span>
              <span style="width: 18%">2023-08-08 14:07</span>
            </p>
            <div class="dobox">
              <el-button size="small">查看报告</el-button>
              <el-button plain size="small">删除试卷</el-button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'smartTest',
  data() {
    return {
      paperName: '',
      radioNums: '1'
    }
  },
  created() {
    let Time = new Date()
    let formattedDateTime = `${Time.getFullYear()}-${padZero(
      Time.getMonth() + 1
    )}-${padZero(Time.getDate())} ${padZero(Time.getHours())}:${padZero(
      Time.getMinutes()
    )}:${padZero(Time.getSeconds())}`

    function padZero(num) {
      return num.toString().padStart(2, '0')
    }
    this.paperName = formattedDateTime
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.smartTest {
  margin-top: 25px;
  margin-bottom: 25px;
}
.Testinbox {
  border: 1px solid #ddd;
  width: 1000px;
  box-sizing: border-box;
  padding: 41px 50px;
  margin: 0 auto;
  height: 100%;

  .testinfor {
    .free {
      .free_a {
        height: 60px;
        line-height: 60px;
      }
      .free_size {
        text-align: center;
      }

      .topic_title {
        display: flex;
        align-items: center;
        height: 38px;
        line-height: 38px;
        p {
          width: 90px;
          height: 26px;
          border-radius: 5px;
          border: solid 1px #cccccc;
          text-align: center;
          font-size: 14px;
          line-height: 24px;
          color: #666666;
          margin-right: 30px;
          cursor: pointer;
        }
      }

      .test_nums {
        height: 40px;
        line-height: 40px;

        .el-radio {
          margin-right: 20px;
        }
      }

      .footer_button {
        text-align: center;
        height: 50px;
        line-height: 50px;
      }
    }
  }
}

.paper_list {
  width: 1000px;
  margin: 0 auto;
  h2 {
    height: 45px;
    line-height: 45px;
    margin-top: 20px;
  }
  .title-li {
    background-color: #ddd;
    border-radius: 2px;
  }
  .itemli {
    display: flex;
    align-items: center;

    .namebox {
      flex: 2;
    }

    .dobox {
      width: 186px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }

    .boxli {
      span {
        text-align: center;
        font-weight: normal !important;
      }
    }
  }
  .itembox {
    padding: 10px 0 5px 0;
    border-bottom: 1px solid #ccc;
    line-height: 55px;
    height: 55px;
    text-align: center;

    .namebox {
      span {
        font-size: 16px;
        width: 20%;
        display: inline-block;
        font-weight: bold;
      }

      .fw {
        width: 15%;
      }
    }
  }
}
</style>
